<template>
    <div class="i-page dictionary-page">
        <el-space class="i-content">
            <i-attach-button :params="params" auto-select @update:active="onType">
                <template #append>
                    <el-button :icon="<any>CirclePlus" link type="primary" @click="onCreateType">
                        添加
                    </el-button>
                </template>
                <template #button="{record,active}">
                    <el-dropdown trigger="contextmenu">
                        <template #dropdown>
                            <el-dropdown-menu class="dictionary-type-menu">
                                <div class="text-center mb-1 font-weight-bold"> {{ record.label }}</div>
                                <el-dropdown-item @click="onCreateChildren(record.value)">
                                    <el-icon>
                                        <CirclePlus/>
                                    </el-icon>
                                    添加子项
                                </el-dropdown-item>
                                <el-dropdown-item @click="api.onEdit(record.value)">
                                    <el-icon>
                                        <Edit/>
                                    </el-icon>
                                    编辑
                                </el-dropdown-item>
                                <el-dropdown-item @click="api.onDelete(record.value)">
                                    <el-icon>
                                        <Delete/>
                                    </el-icon>
                                    删除
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                        <el-button :type="active?'primary':<any>''">
                            {{ record.label }}
                        </el-button>
                    </el-dropdown>
                </template>
            </i-attach-button>

        </el-space>

        <div class="i-content white pa-0">
            <div class="d-flex flex-column">
                <el-space :alignment="'stretch'" direction="horizontal" fill size="large">
                    <el-space>
                        <el-button plain type="primary" @click="onCreateChildren()">创建</el-button>
                    </el-space>

                    <el-table
                            :data="api.tableState.dataSource"
                            border
                    >
                        <el-table-column :width="240" label="类型名称" prop="itemName"/>
                        <el-table-column :width="300" label="值" prop="itemValue"/>
                        <el-table-column :width="160" label="取值字段" prop="itemCode"/>

                        <el-table-column :width="64" label="排序" prop="sortId"/>
                        <el-table-column label="备注" prop="description"/>

                        <el-table-column :align="'center'" fixed="right" label="操作" width="240">
                            <template #default="{ row, column, $index }">
                                <el-space>
                                    <el-button size="small" text type="primary" @click="api.onDetail(row.id)">详情</el-button>
                                    <el-button v-if="row.parentId !== '0'" size="small" text type="primary" @click="api.onEdit(row.id)">编辑</el-button>
                                    <el-button size="small" text type="danger" @click="api.onDelete(row.id)">删除</el-button>
                                </el-space>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pa-4 pt-0 d-flex justify-end">
                        <el-pagination
                                v-model:current-page="api.tableState.pagination.current"
                                v-model:page-size="api.tableState.pagination.pageSize"
                                :total="api.tableState.pagination.total"
                                background
                                layout="total, sizes, prev, pager, next, jumper"
                                @size-change="api.refreshTable()"
                                @current-change="api.refreshTable()"
                        />
                    </div>
                </el-space>
            </div>

            <Create :api="api"/>
            <EditPage :api="api"/>
            <Detail :api="api"/>
        </div>

    </div>

</template>

<script lang="ts" setup>
import {DictionaryService} from "~/api/system/dictionary/dictionary.api";
import {ref} from "vue";
import {AttachMore} from "~/api/types";
import {Dictionary} from "~/api/system/dictionary/types";
import IAttachButton from "~/components/attach/IAttachButton.vue";
import {CirclePlus, Delete, Edit} from "@element-plus/icons-vue";
import Create from "~/views/config/dictionary/Create.vue";
import Detail from "~/views/config/dictionary/Detail.vue";
import EditPage from "~/views/config/dictionary/Edit.vue";

const api = new DictionaryService();
const active = ref<Dictionary>();

const params: AttachMore = {
    target: "dictionary",
    label: "itemName",
    value: "id",
    condition: {
        parentId: "0",
    },
};

function onType(id: string) {
    api.load(id).then(res => {
        if (res.ok) {
            active.value = res.data;
        }
    });
    api.filterTable({parentId: id});
}

function onCreateType() {
    api.onCreate();
    api.createState.title = "创建父级字典";
    api.createState.form.parentId = "0";
}

function onCreateChildren(id?: any) {
    if (!id) {
        id = active.value?.id;
    }
    api.load(id).then(res => {
        api.onCreate();
        const item: Dictionary = res.data as any;
        api.createState.title = "创建【" + item.itemName + "】子集字典";
        api.createState.form.parentId = item.id;
        api.createState.form.type = item.type;
    });
}
</script>

<style lang="scss" scoped>
.dictionary-page {

}

</style>
